<template>
  <div class="box">
    {{ 1+1 }}
  </div>
  <div class="input-wrap">
    <textarea type="text" class="input" v-model="text" :style="style"/>
    <div class="input" v-html="divText"></div>
  </div>
  <div class="div1" id="myDiv1" draggable="true" @dragstart="onStart" @dragend="onEnd">要拖动的元素</div>
  <div class="div2" @drop="onDrop" @dragover="onOver">放置的元素</div>
  <button @click="add">添加</button>
  <div class="container">
    <div class="dropzone draggable-dropzone--occupied">
      <div class="item">A</div>
    </div>
    <div class="dropzone draggable-dropzone--occupied">
      <div class="item">B</div>
    </div>
    <div class="dropzone draggable-dropzone--occupied">
      <div class="item">C</div>
    </div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>
    <div class="dropzone"></div>
  </div>

  <div class="container">
    <div class="dropzone"></div>
  </div>

  <div class="sortableTest-container">
    <div class="sortableTest">
      <div tabindex="0" class="st-item">1</div>
      <div tabindex="1" class="st-item">2</div>
      <div tabindex="2" class="st-item">3</div>
      <div tabindex="3" class="st-item">4</div>
      <div tabindex="4" class="st-item">5</div>
    </div>

    <div class="sortableTest">
      <div tabindex="5" class="st-item">6</div>
      <div tabindex="6" class="st-item">7</div>
      <div tabindex="7" class="st-item">8</div>
      <div tabindex="8" class="st-item">9</div>
      <div tabindex="9" class="st-item">10</div>
    </div>

    <div class="sortableTest">
      <div tabindex="10" class="st-item">11</div>
      <div tabindex="11" class="st-item">12</div>
      <div tabindex="12" class="st-item">13</div>
      <div tabindex="13" class="st-item">14</div>
      <div tabindex="14" class="st-item">15</div>
    </div>
  </div>
</template>
<script lang="jsx">
import {Droppable} from '@shopify/draggable';
import {Sortable} from '@shopify/draggable';
export default{
  data(){
    return {
      a : 1,
      b : 2,
      text : ''
    }
  },
  computed : {
    divText(){
      return this.text.replace(/\n/g,'<br/>')
    },
    style(){
      let lines = this.text.split(/\n/g).length;
      return {
        height : 20 * lines + 'px'
      }
    }
  },
  methods : {
    onStart(e){
      console.log(`dragstart`);
      e.dataTransfer.setData("text", e.target.id);
    },
    onEnd(e){
      console.log(`dragend`);
    },
    onOver(e){
      //这个如果没有的话就不会触发drop
      e.preventDefault();
      console.log(`onover`);
    },
    onDrop(e){
      console.log(e);
      e.preventDefault();
      console.log('drop');
      // 获取被拖拽的元素的id
      const data = e.dataTransfer.getData("text");
      console.log(data);
    },
    add(){
      console.log(`helloworld`);
    }
  },
  mounted(){
    console.log(`helloworld`);
    let abc = <div>helloworld</div>;
    console.log(abc);

    const droppable = new Droppable(document.querySelectorAll('.container'), {
      draggable: '.item',
      dropzone: '.dropzone',
    });

    const sortable = new Sortable(document.querySelectorAll('.sortableTest'),{
      draggable : '.st-item'
    });


    //60 * 30 = 1800
    //9 buy 10 sell
    
  }
}
</script>
<style lang="scss">
.box{
  width:100px;
  height:100px;
  border:1px solid #000;
}
.input{
  transform-origin:left center;
  border:0;
  background:transparent;
  outline:none;
  caret-color:green;
  font-weight:bold;
  font-size:16px;
  padding:0;
  margin:30px;
  font-family:Arial;
  line-height:20px;
  &-wrap{
    position:relative;
  }
}
textarea{
  color:transparent;
}
div.input{
  position:absolute;
  left:0;
  top:0;
}
.div1{
  width:100px;
  height:100px;
  border:1px solid #000;
}
.div2{
  width:200px;
  height:200px;
  border:1px solid #000;
}

.container{
  width:50px;
}
.item {
  height: 100%;
}
.dropzone {
  outline: solid 1px;
  height: 50px;
}
.draggable-dropzone--occupied {
  background: lightgreen;
}
.sortableTest{
  &-container{
    display:flex;
  }
  transition:all .5s ease;
  margin:10px;
  .st{
    &-item{
      border:1px solid #000;
      width:50px;
      height:50px;
    }
  }
}
</style>
